<template>
    <div class="header__content">
        <n-button @click="exportToExcel" type="primary">导出Excel</n-button>
    </div>
    <div class="main__content">
        <template v-if="props.extractObject.gameMode === 'Elimi'">
            <n-table :bordered="false" :single-line="false">
                <thead>
                    <tr>
                        <th style="width:60px; text-align:center;">场次</th>
                        <th style="text-align:center;">主场战队</th>
                        <th style="text-align:center;">客场战队</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in props.extractData as GameInfo[]" :key="index">
                        <td width="60px" align="center">{{ index + 1 }}</td>
                        <td align="center">{{ item.leftTeam }}</td>
                        <td align="center">{{ item.rightTeam }}</td>
                    </tr>
                </tbody>
            </n-table>
        </template>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import * as XLSX from 'xlsx';
import { useMessage } from 'naive-ui';
const message = useMessage();
// 接口定义
interface GameInfo {
    leftTeam: string;
    rightTeam: string;
}

const props = defineProps({
    extractData: {
        type: Array,
        default: () => []
    },
    extractObject: {
        type: Object,
        required: true
    }
});

const exportToExcel = () => {
    if (props.extractObject.gameMode === 'Elimi') {
        exportByElimi();
    } else {
        message.error('暂时不支持该赛制导出！');
    }
}
// 淘汰赛导出
const exportByElimi = () => {
    if (!props.extractData || props.extractData.length === 0) {
        console.warn('没有数据可导出');
        return;
    }

    // 1. 准备数据（带表头）
    const data = [
        ['场次', '主场战队', '客场战队'], // 表头
        ...(props.extractData as GameInfo[]).map((item, index) => [
            index + 1,
            item.leftTeam,
            item.rightTeam,
        ]),
    ];

    // 2. 创建工作表
    const worksheet = XLSX.utils.aoa_to_sheet(data);

    // 3. 设置列宽（单位：字符宽度）
    worksheet['!cols'] = [
        { wch: 10 },  // 场次列宽（默认）
        { wch: 240 }, // 主场战队列宽（240px ≈ 32字符）
        { wch: 240 }, // 客场战队列宽
    ];

    // 4. 设置单元格居中（通过自定义样式）
    const range = XLSX.utils.decode_range(worksheet['!ref']!);
    for (let row = range.s.r; row <= range.e.r; row++) {
        for (let col = range.s.c; col <= range.e.c; col++) {
            const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
            if (!worksheet[cellAddress]) continue;

            // 添加居中样式
            worksheet[cellAddress].s = {
                alignment: {
                    horizontal: 'center',
                    vertical: 'center',
                },
            };
        }
    }

    // 5. 导出文件
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, '比赛数据');
    XLSX.writeFile(workbook, '比赛数据.xlsx');
};
</script>

<style scoped lang="scss">
.header__content {
    margin-bottom: 16px;
}
</style>